<template>
  <div class="topic-page">
    <div class="container">
      <!-- 面包屑导航 -->
      <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/forum' }">职聊论坛</el-breadcrumb-item>
          <el-breadcrumb-item v-if="topic" :to="{ path: `/forum/boards/${topic.boardId}` }">{{ topic.boardName }}</el-breadcrumb-item>
          <el-breadcrumb-item v-if="topic">{{ topic.title }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="15" animated />
      </div>

      <!-- 主题详情 -->
      <div v-else-if="topic" class="topic-detail">
        <!-- 主题信息 -->
        <div class="topic-header">
          <h1 class="topic-title">{{ topic.title }}</h1>
          
          <div class="topic-meta">
            <div class="board-tag" :style="{ backgroundColor: topic.boardColor + '20', color: topic.boardColor }">
              {{ topic.boardName }}
            </div>
            <div class="meta-item">
              <el-icon><view /></el-icon>
              <span>{{ topic.views }}次浏览</span>
            </div>
            <div class="meta-item">
              <el-icon><chat-line-round /></el-icon>
              <span>{{ topic.replies.length }}条回复</span>
            </div>
            <div class="meta-item">
              <el-icon><timer /></el-icon>
              <span>发布于{{ topic.publishTime }}</span>
            </div>
          </div>
        </div>

        <!-- 主贴内容 -->
        <div class="post-container main-post">
          <div class="post-sidebar">
            <div class="author-avatar">
              <img v-if="topic.author.avatar" :src="getFullAvatarURL(topic.author.avatar)" :alt="topic.author.name">
              <div class="avatar-placeholder" v-else>{{ topic.author.name.substring(0, 1) }}</div>
            </div>
            <div class="author-name">{{ topic.author.name }}</div>
            <div class="author-title">{{ topic.author.title }}</div>
            <div class="author-stats">
              <div class="stat-item">话题：{{ topic.author.topicCount }}</div>
              <div class="stat-item">回复：{{ topic.author.replyCount }}</div>
              <div class="stat-item">注册于：{{ topic.author.registerTime }}</div>
            </div>
          </div>
          
          <div class="post-content">
            <div class="post-body" v-html="topic.content"></div>

            <div class="post-attachments" v-if="topic.attachments && topic.attachments.length > 0">
              <div class="attachments-title">附件：</div>
              <div class="attachments-list">
                <div 
                  v-for="(attachment, index) in topic.attachments" 
                  :key="index"
                  class="attachment-item"
                >
                  <el-button size="small" type="primary" text @click="downloadAttachment(attachment)">
                    <el-icon><document /></el-icon>
                    {{ attachment.name }}
                  </el-button>
                </div>
              </div>
            </div>
            
            <div class="post-actions">
              <div class="vote-action">
                <el-button 
                  type="primary" 
                  :icon="CaretTop" 
                  circle 
                  @click="upvoteTopic"
                  :disabled="hasVoted"
                ></el-button>
                <span class="vote-count">{{ topic.votes }}</span>
              </div>
              <div class="action-btns">
                <el-button type="primary" text :icon="Star" @click="collectTopic">
                  {{ isCollected ? '已收藏' : '收藏' }}
                </el-button>
                <el-button type="primary" text :icon="Share" @click="shareTopic">
                  分享
                </el-button>
                <el-button type="primary" text :icon="Warning" @click="reportTopic">
                  举报
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 回复列表容器，会在下一部分中实现具体内容 -->
        <div class="replies-container">
          <!-- 回复列表标题 -->
          <div class="replies-header">
            <h2 class="section-title">全部回复 ({{ topic.replies.length }})</h2>
            <div class="sort-options">
              <span class="label">排序：</span>
              <el-radio-group v-model="sortOrder" size="small">
                <el-radio-button label="newest">最新</el-radio-button>
                <el-radio-button label="oldest">最早</el-radio-button>
                <el-radio-button label="popular">最热</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          
          <!-- 回复列表 -->
          <div class="replies-list">
            <div 
              v-for="(reply, index) in sortedReplies" 
              :key="reply.id" 
              class="reply-item"
              :id="'reply-' + reply.id"
            >
              <div class="reply-num">#{{ index + 1 }}</div>
              
              <div class="post-container">
                <div class="post-sidebar">
                  <div class="author-avatar">
                    <img v-if="reply.author && reply.author.avatar" :src="getFullAvatarURL(reply.author.avatar)" :alt="reply.author.name">
                    <div class="avatar-placeholder" v-else>{{ reply.author ? reply.author.name.substring(0, 1) : '匿名' }}</div>
                  </div>
                  <div class="author-name">{{ reply.author.name }}</div>
                  <div class="author-title">{{ reply.author.title }}</div>
                  <div class="author-stats">
                    <div class="stat-item">话题：{{ reply.author.topicCount }}</div>
                    <div class="stat-item">回复：{{ reply.author.replyCount }}</div>
                  </div>
                </div>
                
                <div class="post-content">
                  <div class="post-header">
                    <div class="post-info">
                      <span class="post-time">{{ reply.publishTime }}</span>
                    </div>
                    <div class="post-menu">
                      <el-dropdown trigger="click" @command="handleReplyAction($event, reply)">
                        <el-button type="primary" text :icon="MoreFilled"></el-button>
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item command="quote">引用回复</el-dropdown-item>
                            <el-dropdown-item command="report">举报</el-dropdown-item>
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                    </div>
                  </div>
                  
                  <div class="post-body" v-html="reply.content"></div>
                  
                  <div class="post-actions">
                    <div class="vote-action">
                      <el-button 
                        type="primary" 
                        :icon="CaretTop" 
                        circle 
                        size="small"
                        @click="upvoteReply(reply)"
                        :disabled="replyVoteStatus[reply.id]"
                      ></el-button>
                      <span class="vote-count">{{ reply.votes }}</span>
                    </div>
                    <div class="action-btns">
                      <el-button type="primary" text size="small" @click="quoteReply(reply)">
                        <el-icon><chat-dot-round /></el-icon>引用
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 分页控制 -->
          <div class="pagination-container" v-if="topic.replies.length > 10">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="topic.replies.length"
              :page-size="10"
              :current-page="currentPage"
              @current-change="handlePageChange"
            />
          </div>
        </div>

        <!-- 回复表单 -->
        <div class="reply-form-container">
          <h3 class="reply-form-title">
            <span v-if="!replyQuote">发表回复</span>
            <span v-else>引用 {{ replyQuote.author.name }} 的回复</span>
            <el-button v-if="replyQuote" type="primary" text size="small" @click="cancelQuote">
              取消引用
            </el-button>
          </h3>
          
          <div class="quote-box" v-if="replyQuote">
            <div class="quote-header">
              <span class="quote-author">{{ replyQuote.author.name }}</span>
              <span class="quote-time">{{ replyQuote.publishTime }}</span>
            </div>
            <div class="quote-content" v-html="getQuotePreview(replyQuote.content)"></div>
          </div>
          
          <div class="editor-container">
            <!-- 这里可以接入富文本编辑器，这里使用简单的文本域替代 -->
            <el-input
              v-model="replyContent"
              type="textarea"
              :rows="6"
              placeholder="请输入回复内容..."
              resize="none"
            ></el-input>
          </div>
          
          <div class="form-actions">
            <el-button type="primary" @click="submitReply" :disabled="!replyContent.trim()">
              提交回复
            </el-button>
          </div>
        </div>
      </div>

      <!-- 错误状态 -->
      <div v-else class="error-container">
        <el-empty description="未找到相关话题信息" />
        <div class="error-actions">
          <el-button type="primary" @click="goBack">返回上一页</el-button>
          <el-button @click="goToForum">前往论坛首页</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { 
  View, 
  ChatLineRound, 
  Timer, 
  Document, 
  CaretTop,
  Star,
  Share,
  Warning,
  Edit,
  Delete,
  MoreFilled,
  ChatDotRound
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getFullAvatarURL } from '@/utils/common'

const route = useRoute()
const router = useRouter()
const topicId = route.params.id

// 页面状态
const loading = ref(true)
const topic = ref(null)
const sortOrder = ref('newest')
const isCollected = ref(false)
const hasVoted = ref(false)
const currentPage = ref(1)

// 回复相关
const replyContent = ref('')
const replyQuote = ref(null)
const replyVoteStatus = reactive({})

// 排序后的回复列表
const sortedReplies = computed(() => {
  if (!topic.value || !topic.value.replies) return []
  
  const replies = [...topic.value.replies]
  
  switch (sortOrder.value) {
    case 'newest':
      return replies.sort((a, b) => new Date(b.publishTime) - new Date(a.publishTime))
    case 'oldest':
      return replies.sort((a, b) => new Date(a.publishTime) - new Date(b.publishTime))
    case 'popular':
      return replies.sort((a, b) => b.votes - a.votes)
    default:
      return replies
  }
})

// 获取主题详情
const fetchTopicDetail = async () => {
  loading.value = true
  
  try {
    // 模拟API请求延迟
    await new Promise(resolve => setTimeout(resolve, 800))
    
    // 模拟主题详情数据
    topic.value = {
      id: topicId,
      title: '2025年程序员跳槽薪资普遍下降了吗？',
      boardId: 2,
      boardName: '薪资福利',
      boardColor: '#e74c3c',
      views: 12843,
      votes: 156,
      publishTime: '2025-05-10 14:30',
      content: `
        <p>最近几个月，我注意到互联网行业整体氛围明显变了，很多公司都收紧了招聘，朋友圈里讨论的跳槽薪资也普遍没有往年那么乐观。</p>
        <p>作为一个有5年经验的前端开发，去年跳槽时普遍能拿到40-50k的package，但今年据说同等经验的薪资已经降到了35-45k。</p>
        <p>想问问最近跳槽的小伙伴们，是否也有这种感受？各个岗位的薪资跳幅大概是多少？大厂和中小厂的情况有什么不同？</p>
        <p>分享一下自己的情况：</p>
        <ul>
          <li>岗位：前端开发</li>
          <li>经验：5年</li>
          <li>上家薪资：38k</li>
          <li>目前收到的offer薪资范围：35k-42k</li>
          <li>去年同事跳槽薪资范围：45k-55k</li>
        </ul>
        <p>感觉整体薪资跳幅确实比去年低了不少，希望大家能分享一下各自领域的情况，帮助更多正在求职的朋友有个参考。</p>
      `,
      attachments: [
        {
          name: '2025年互联网行业薪资调查报告.pdf',
          url: '#'
        }
      ],
      author: {
        id: 123,
        name: '程序猿小王',
        avatar: '',
        title: '资深前端开发',
        topicCount: 32,
        replyCount: 128,
        registerTime: '2020-05-18'
      },
      replies: [
        {
          id: 1001,
          content: '确实，我今年3月跳槽，比去年同期的朋友薪资要低10%左右。而且很多公司都压缩HC了，面试难度也提高了不少。',
          publishTime: '2025-05-10 15:45',
          votes: 24,
          author: {
            id: 456,
            name: '技术老兵',
            avatar: '',
            title: '后端架构师',
            topicCount: 15,
            replyCount: 246,
            registerTime: '2018-11-24'
          }
        },
        {
          id: 1002,
          content: '我是AI算法方向，感觉薪资倒是相对稳定，但是招聘需求确实少了，尤其是初级岗位基本上很多公司都不招了。',
          publishTime: '2025-05-10 16:28',
          votes: 15,
          author: {
            id: 789,
            name: 'AI研究员',
            avatar: '',
            title: '算法工程师',
            topicCount: 8,
            replyCount: 53,
            registerTime: '2021-03-15'
          }
        },
        {
          id: 1003,
          content: `
            <p>分享一下我的情况：</p>
            <p>岗位：Java开发</p>
            <p>经验：7年</p>
            <p>上家薪资：45k</p>
            <p>现在薪资：53k</p>
            <p>我感觉大厂的薪资相对稳定，但是对能力和面试的要求确实更高了。中小厂现在普遍降薪，特别是那些还没盈利的创业公司。</p>
          `,
          publishTime: '2025-05-11 09:12',
          votes: 32,
          author: {
            id: 101,
            name: 'Java大牛',
            avatar: '',
            title: '技术总监',
            topicCount: 45,
            replyCount: 312,
            registerTime: '2017-05-20'
          }
        }
      ]
    }
    
  } catch (error) {
    console.error('获取主题详情失败', error)
    ElMessage.error('获取主题详情失败，请稍后重试')
    topic.value = null
  } finally {
    loading.value = false
  }
}

// 点赞主题
const upvoteTopic = () => {
  // 检查是否登录
  const token = localStorage.getItem('token')
  if (!token) {
    ElMessageBox.confirm(
      '您需要登录后才能点赞，是否立即登录？',
      '提示',
      {
        confirmButtonText: '去登录',
        cancelButtonText: '取消',
        type: 'info'
      }
    ).then(() => {
      router.push({
        path: '/auth/login',
        query: { redirect: route.fullPath }
      })
    }).catch(() => {})
    return
  }
  
  // 模拟点赞操作
  if (!hasVoted.value) {
    topic.value.votes++
    hasVoted.value = true
    ElMessage.success('点赞成功')
  }
}

// 点赞回复
const upvoteReply = (reply) => {
  // 检查是否登录
  const token = localStorage.getItem('token')
  if (!token) {
    ElMessageBox.confirm(
      '您需要登录后才能点赞，是否立即登录？',
      '提示',
      {
        confirmButtonText: '去登录',
        cancelButtonText: '取消',
        type: 'info'
      }
    ).then(() => {
      router.push({
        path: '/auth/login',
        query: { redirect: route.fullPath }
      })
    }).catch(() => {})
    return
  }
  
  // 模拟点赞操作
  if (!replyVoteStatus[reply.id]) {
    reply.votes++
    replyVoteStatus[reply.id] = true
    ElMessage.success('点赞成功')
  }
}

// 收藏主题
const collectTopic = () => {
  // 检查是否登录
  const token = localStorage.getItem('token')
  if (!token) {
    ElMessageBox.confirm(
      '您需要登录后才能收藏，是否立即登录？',
      '提示',
      {
        confirmButtonText: '去登录',
        cancelButtonText: '取消',
        type: 'info'
      }
    ).then(() => {
      router.push({
        path: '/auth/login',
        query: { redirect: route.fullPath }
      })
    }).catch(() => {})
    return
  }
  
  // 模拟收藏/取消收藏操作
  isCollected.value = !isCollected.value
  ElMessage.success(isCollected.value ? '收藏成功' : '已取消收藏')
}

// 分享主题
const shareTopic = () => {
  ElMessageBox.alert(
    '分享链接：' + window.location.href,
    '分享话题',
    {
      confirmButtonText: '复制链接',
      callback: (action) => {
        if (action === 'confirm') {
          navigator.clipboard.writeText(window.location.href)
            .then(() => {
              ElMessage.success('链接已复制到剪贴板')
            })
            .catch(err => {
              console.error('复制失败', err)
              ElMessage.error('复制失败，请手动复制')
            })
        }
      }
    }
  )
}

// 举报主题
const reportTopic = () => {
  // 检查是否登录
  const token = localStorage.getItem('token')
  if (!token) {
    ElMessageBox.confirm(
      '您需要登录后才能举报，是否立即登录？',
      '提示',
      {
        confirmButtonText: '去登录',
        cancelButtonText: '取消',
        type: 'info'
      }
    ).then(() => {
      router.push({
        path: '/auth/login',
        query: { redirect: route.fullPath }
      })
    }).catch(() => {})
    return
  }
  
  ElMessageBox.confirm(
    '确定要举报该话题吗？我们会尽快审核处理。',
    '举报确认',
    {
      confirmButtonText: '确定举报',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('举报已提交，我们会尽快处理')
  }).catch(() => {})
}

// 下载附件
const downloadAttachment = (attachment) => {
  ElMessage.info(`模拟下载附件：${attachment.name}`)
  // 实际项目中应该调用下载API或直接打开下载链接
  // window.open(attachment.url, '_blank')
}

// 处理回复操作
const handleReplyAction = (action, reply) => {
  switch (action) {
    case 'quote':
      quoteReply(reply)
      break
    case 'report':
      reportReply(reply)
      break
    default:
      break
  }
}

// 引用回复
const quoteReply = (reply) => {
  replyQuote.value = reply
  // 滚动到回复区域
  setTimeout(() => {
    document.querySelector('.reply-form-container').scrollIntoView({ behavior: 'smooth' })
  }, 100)
}

// 取消引用
const cancelQuote = () => {
  replyQuote.value = null
}

// 获取引用预览
const getQuotePreview = (content) => {
  // 简单处理HTML，移除标签，截取前100个字符
  const plainText = content.replace(/<[^>]*>/g, '')
  return plainText.length > 100 ? plainText.substring(0, 100) + '...' : plainText
}

// 举报回复
const reportReply = (reply) => {
  // 检查是否登录
  const token = localStorage.getItem('token')
  if (!token) {
    ElMessageBox.confirm(
      '您需要登录后才能举报，是否立即登录？',
      '提示',
      {
        confirmButtonText: '去登录',
        cancelButtonText: '取消',
        type: 'info'
      }
    ).then(() => {
      router.push({
        path: '/auth/login',
        query: { redirect: route.fullPath }
      })
    }).catch(() => {})
    return
  }
  
  ElMessageBox.confirm(
    '确定要举报该回复吗？我们会尽快审核处理。',
    '举报确认',
    {
      confirmButtonText: '确定举报',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('举报已提交，我们会尽快处理')
  }).catch(() => {})
}

// 提交回复
const submitReply = () => {
  // 检查是否登录
  const token = localStorage.getItem('token')
  if (!token) {
    ElMessageBox.confirm(
      '您需要登录后才能回复，是否立即登录？',
      '提示',
      {
        confirmButtonText: '去登录',
        cancelButtonText: '取消',
        type: 'info'
      }
    ).then(() => {
      router.push({
        path: '/auth/login',
        query: { redirect: route.fullPath }
      })
    }).catch(() => {})
    return
  }
  
  // 检查回复内容
  if (!replyContent.value.trim()) {
    ElMessage.warning('回复内容不能为空')
    return
  }
  
  // 模拟提交回复
  ElMessage.success('回复已提交，正在审核中')
  
  // 模拟添加回复到列表
  const newReply = {
    id: Date.now(),
    content: replyContent.value,
    publishTime: new Date().toLocaleString(),
    votes: 0,
    author: {
      id: 999,
      name: '当前用户',
      avatar: '',
      title: '论坛会员',
      topicCount: 5,
      replyCount: 20,
      registerTime: '2023-01-01'
    }
  }
  
  // 如果是引用回复，添加引用内容
  if (replyQuote.value) {
    newReply.content = `<blockquote><div class="quote-author">${replyQuote.value.author.name} 说：</div>${getQuotePreview(replyQuote.value.content)}</blockquote><p>${replyContent.value}</p>`
  }
  
  topic.value.replies.push(newReply)
  
  // 清空表单
  replyContent.value = ''
  replyQuote.value = null
  
  // 滚动到新回复
  setTimeout(() => {
    document.getElementById(`reply-${newReply.id}`).scrollIntoView({ behavior: 'smooth' })
  }, 100)
}

// 处理分页变化
const handlePageChange = (page) => {
  currentPage.value = page
  // 滚动到回复区域顶部
  setTimeout(() => {
    document.querySelector('.replies-container').scrollIntoView({ behavior: 'smooth' })
  }, 100)
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 前往论坛首页
const goToForum = () => {
  router.push('/forum')
}

onMounted(() => {
  fetchTopicDetail()
})
</script>

<style lang="scss" scoped>
.topic-page {
  padding: var(--spacing-xl) 0;
  background-color: var(--bg-light);
  min-height: calc(100vh - 60px);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

// 面包屑导航
.breadcrumb {
  margin-bottom: var(--spacing-md);
}

// 加载状态
.loading-container {
  padding: var(--spacing-xl);
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-sm);
}

// 错误状态
.error-container {
  padding: var(--spacing-xl);
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-sm);
  text-align: center;
  
  .error-actions {
    margin-top: var(--spacing-lg);
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
  }
}

// 主题详情区
.topic-detail {
  // 主题头部
  .topic-header {
    background-color: white;
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    box-shadow: var(--box-shadow-sm);
    margin-bottom: var(--spacing-md);
    
    .topic-title {
      font-size: 1.6rem;
      font-weight: 700;
      margin: 0 0 var(--spacing-md);
      color: var(--text-primary);
    }
    
    .topic-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--spacing-md);
      
      .board-tag {
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 0.9rem;
        font-weight: 500;
      }
      
      .meta-item {
        display: flex;
        align-items: center;
        font-size: 0.9rem;
        color: var(--text-light);
        
        .el-icon {
          margin-right: var(--spacing-xs);
        }
      }
    }
  }
  
  // 帖子容器通用样式
  .post-container {
    display: flex;
    background-color: white;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--box-shadow-sm);
    
    // 用户侧边栏
    .post-sidebar {
      width: 160px;
      padding: var(--spacing-lg);
      border-right: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .author-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        overflow: hidden;
        margin-bottom: var(--spacing-md);
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .avatar-placeholder {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: var(--color-primary);
          color: white;
          font-size: 2rem;
          font-weight: 500;
        }
      }
      
      .author-name {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: var(--spacing-xs);
        color: var(--text-primary);
        text-align: center;
      }
      
      .author-title {
        font-size: 0.85rem;
        color: var(--text-secondary);
        margin-bottom: var(--spacing-md);
        text-align: center;
      }
      
      .author-stats {
        width: 100%;
        
        .stat-item {
          font-size: 0.85rem;
          color: var(--text-light);
          margin-bottom: var(--spacing-xs);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    
    // 帖子内容区
    .post-content {
      flex-grow: 1;
      padding: var(--spacing-lg);
      
      .post-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--spacing-md);
        
        .post-info {
          .post-time {
            color: var(--text-light);
            font-size: 0.9rem;
          }
        }
      }
      
      .post-body {
        line-height: 1.8;
        color: var(--text-primary);
        margin-bottom: var(--spacing-lg);
        
        p {
          margin-bottom: var(--spacing-md);
        }
        
        ul, ol {
          padding-left: var(--spacing-xl);
          margin-bottom: var(--spacing-md);
        }
        
        blockquote {
          background-color: #f8f8f8;
          border-left: 4px solid var(--border-color);
          padding: var(--spacing-sm) var(--spacing-md);
          margin-bottom: var(--spacing-md);
          
          .quote-author {
            color: var(--color-primary);
            font-weight: 500;
            margin-bottom: var(--spacing-xs);
          }
        }
      }
      
      .post-attachments {
        margin-bottom: var(--spacing-lg);
        
        .attachments-title {
          font-weight: 600;
          margin-bottom: var(--spacing-xs);
          color: var(--text-primary);
        }
        
        .attachments-list {
          display: flex;
          flex-wrap: wrap;
          gap: var(--spacing-xs);
        }
      }
      
      .post-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid var(--border-color);
        padding-top: var(--spacing-md);
        
        .vote-action {
          display: flex;
          align-items: center;
          
          .vote-count {
            margin-left: var(--spacing-xs);
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--color-success);
          }
        }
        
        .action-btns {
          display: flex;
          gap: var(--spacing-sm);
        }
      }
    }
    
    // 主贴特殊样式
    &.main-post {
      .post-sidebar {
        background-color: #f8f9fb;
      }
    }
  }
  
  // 回复列表
  .replies-container {
    background-color: white;
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    box-shadow: var(--box-shadow-sm);
    margin-bottom: var(--spacing-md);
    
    .replies-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--spacing-lg);
      
      .section-title {
        font-size: 1.3rem;
        font-weight: 600;
        margin: 0;
        color: var(--text-primary);
      }
      
      .sort-options {
        display: flex;
        align-items: center;
        
        .label {
          margin-right: var(--spacing-xs);
          color: var(--text-light);
        }
      }
    }
    
    .replies-list {
      .reply-item {
        margin-bottom: var(--spacing-lg);
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .reply-num {
          font-size: 0.9rem;
          color: var(--text-light);
          margin-bottom: var(--spacing-xs);
        }
      }
    }
    
    .pagination-container {
      margin-top: var(--spacing-lg);
      display: flex;
      justify-content: center;
    }
  }
  
  // 回复表单
  .reply-form-container {
    background-color: white;
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    box-shadow: var(--box-shadow-sm);
    
    .reply-form-title {
      font-size: 1.2rem;
      font-weight: 600;
      margin: 0 0 var(--spacing-md);
      color: var(--text-primary);
      display: flex;
      align-items: center;
      
      span {
        margin-right: var(--spacing-sm);
      }
    }
    
    .quote-box {
      background-color: #f8f8f8;
      border-left: 4px solid var(--border-color);
      padding: var(--spacing-sm) var(--spacing-md);
      margin-bottom: var(--spacing-md);
      
      .quote-header {
        margin-bottom: var(--spacing-xs);
        
        .quote-author {
          color: var(--color-primary);
          font-weight: 500;
          margin-right: var(--spacing-xs);
        }
        
        .quote-time {
          color: var(--text-light);
          font-size: 0.85rem;
        }
      }
      
      .quote-content {
        color: var(--text-secondary);
        font-size: 0.95rem;
      }
    }
    
    .editor-container {
      margin-bottom: var(--spacing-md);
    }
    
    .form-actions {
      display: flex;
      justify-content: flex-end;
    }
  }
}

// 响应式适配
@media (max-width: 768px) {
  .topic-detail {
    .post-container {
      flex-direction: column;
      
      .post-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: var(--spacing-md);
        
        .author-stats {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: var(--spacing-md);
          
          .stat-item {
            margin-bottom: 0;
          }
        }
      }
    }
    
    .replies-container {
      .replies-header {
        flex-direction: column;
        align-items: flex-start;
        
        .section-title {
          margin-bottom: var(--spacing-sm);
        }
      }
    }
  }
}
</style> 